<template>
	<view style="height: 100%;">
		<view class="container" style="height: 100%;">
			<view class="response bg-main head-block">
				<view class="response text-center text-sl padding-top-sm">{{userInfo.integral}}</view>
				<view class="response text-center text-sm">剩余积分</view>
				<!-- <view class="response flex margin-top padding-tb">
					<view class="money-block border-right  text-sm text-white">
						<view class="response text-center">{{userInfo.integralAllin}}</view>
						<view class="response text-center">总收益</view>
					</view>
					<view class="money-block">
						<view class="response text-center">{{userInfo.integralAllout}}</view>
						<view class="response text-center">总支出</view>
					</view>
				</view> -->
			</view>
			<view class="response bg-white flex justify-between align-center padding-sm">
				<view class="text-sm text-gray"><view class="cu-btn bg-orange round "  @click="addCard">添加银行卡</view></view><!-- 满100积分即可提现 -->
				<view class="cu-btn bg-main round" @click="toggleSpec">提现</view>
			</view>
			<view class="response padding-tb-sm flex justify-between padding-lr">
				<view class="text-bold text-df">我的卡<text class="padding-lr text-sm text-gray">共{{list.length}}张</text></view>
				<!-- <view class="cu-btn bg-main round "  @click="addCard">添加银行卡</view> -->
			</view>
			<view class="response padding-lr padding-bottom card-list" >

				<navigator :url="'cardShow?id='+item.id" v-for="item in list" :key="item.id" class="response card-item light margin-bottom-sm flex padding flex-wrap" 
				:class="{'zgyh':item.bankName == 0,'nyyh':item.bankName == 1,'gsyh':item.bankName == 2,'jsyh':item.bankName == 3,'yzyh':item.bankName == 4
				,'jtyh':item.bankName == 5,'zsyh':item.bankName == 6,'xyyh':item.bankName == 7,'zxyh':item.bankName == 8,'pfyh':item.bankName == 9
				,'gfyh':item.bankName == 10,'msyh':item.bankName == 11,'hxyh':item.bankName == 12,'payh':item.bankName == 13}">
					<view class="bank-icon bg-white padding-xs round">
						<image class="round" :src="'../../static/bank/icon_bank_'+item.jx+'.png'"></image>
					</view>
					<view class="bank-name-block text-white padding-left-sm">
						<view class="response text-df">{{item.bankNames}}</view>
						<view class="response text-sm">{{item.cardType == 0 ? '储蓄卡' : '信用卡'}}</view>
					</view>
					<view class="bank-number text-right">{{item.cardNumber}}</view>
					<view class="response flex justify-between align-end">
						<view class="text-xs text-white" style="opacity: .5;">持卡人: {{item.cardName}}</view>
						<image style="width: 160upx;" :src="'../../static/bank/icon_bg_'+item.jx+'.png'" mode="widthFix"></image>
					</view>
				</navigator>
				
			</view>
		</view>
		<!-- 规格-模态层弹窗 -->
		<view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer attr-content padding" @click.stop="stopPrevent">
				<!-- #ifndef MP-ALIPAY -->
				<view class="response text-df">请选择提现银行卡</view>
				<view class="cu-form-group">
					<picker v-if="list.length > 0" @change="MultiChange" :value="selectCard" :range="list" range-key="rangeKey">
						<view class="picker">
							{{list[selectCard].rangeKey}}
						</view>
					</picker>
				</view>
				<!-- #endif -->
				<view class="response text-df">请输入提现金额</view>
				<view class="response flex align-center padding-top solid-bottom">
					<view class="money-icon text-black text-xxl text-right">¥</view>
					<view class="money-input-view padding-lr">
						<input class="text-xxl text-black" type="digit" maxlength="20" :value="withdrawalAmont" @input="updateMoney"/>
					</view>
				</view>
				<view class="response text-sm text-gray margin-top">本次服务费:<text class="text-red padding-lr-xs">{{serviceFee}}</text>元</view>
				<view class="response text-xs text-gray text-right margin-top">提现将收取3%服务费用</view>
				<button class="btn" @click="doGetMoney">申请提现</button>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				selectCard: 0,//选择银行卡
				specClass: 'none',
				withdrawalAmont:'',//提现金额
				serviceFee:0,//提现费用
				userInfo:{}
			}
		},
		onShow() {
			this.init();
		},
		methods: {
			init(){
				this.list=[];
				this.selectCard= 0;//选择银行卡
				this.specClass= 'none';
				this.withdrawalAmont='';//提现金额
				this.serviceFee=0;//提现费用
				this.userInfo={};
				var that = this;
				that.$network.request("UserCardAction/cardList", {}, function(res) {
					let list = res.data.list;
					for(var i in list){
						list[i].bankNames = that.getBankName(list[i].bankName);
						list[i].jx = that.getBankJX(list[i].bankName);
						list[i].cardNumber = that.getBankNum(list[i].cardNumber)
						
						list[i].rangeKey = list[i].bankNames+' '+list[i].cardNumber;
					}
					that.list = list;
					that.userInfo = res.data.user
				}, "", function(res) {
					console.error(JSON.stringify(res))
					uni.showToast({
						icon: 'none',
						title: '加载失败',
						duration: 1200
					})
				});
			},
			MultiChange(e){
				this.selectCard = e.detail.value;
			},
			updateMoney(e){
				var money = e.detail.value;
				if(money*1 > this.userInfo.integral*1){
					money = this.userInfo.integral;
					this.withdrawalAmont = ''; 
					this.$api.msg("已超过可提现金额");
					return;
				}
				if(money != '' && !/^\d+\.?\d{0,2}$/.test(money)){
					money = money.substring(0,money.lastIndexOf(".")+2);
					console.log(money)
				}
				this.withdrawalAmont = money; 
				let fee = this.$math._mul(money,0.03);
				fee = Math.ceil(this.$math._mul(fee,100));
				fee = this.$math._div(fee,100);
				this.serviceFee = fee;
			},
			/** 提现 **/
			doGetMoney(){
				if(this.userInfo.integral <= 0){
					this.$api.msg("积分不足无法提现");
					return
				}
				var money = this.withdrawalAmont;
				// if(money < 100){
				// 	this.$api.msg("最少提现100元");
				// 	return
				// }
				var that = this;
				uni.showModal({
					title:'提示',
					content:'确认提现'+that.withdrawalAmont+'积分到银行卡?',
					success(res) {
						if(res.confirm){
							that.$network.request("UserCardAction/getMoney", {
								money:that.withdrawalAmont,
								cardId: that.list[that.selectCard].id
							}, function(res) {
								if(res.data.state){
									uni.showToast({
										icon: 'success',
										title: '申请成功',
										duration: 1200
									})
									setTimeout(function() {
										that.init();
									}, 1200);
								}else{
									uni.showToast({
										icon: 'none',
										title: res.data.msg ? res.data.msg :'申请失败',
										duration: 1200
									})
								}
							}, "", function(res) {
								console.error(JSON.stringify(res))
								uni.showToast({
									icon: 'none',
									title: '加载失败',
									duration: 1200
								})
							});
						}
					}
				})
			},
			stopPrevent() {},
			//规格弹窗开关
			toggleSpec() {
				if(this.userInfo.integral <= 0){
					this.$api.msg("积分不足无法提现");
					return
				}
				if(this.list == 0){
					this.$api.msg("请添加银行卡");
					return;
				}
				if (this.specClass === 'show') {
					this.specClass = 'hide';
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				} else if (this.specClass === 'none') {
					this.specClass = 'show';
				}
			},
			addCard(){
				
				uni.navigateTo({
					url: '/pages/card/cardManage'
				})
			},
			getBankName(num){
				if(num == 0){
					return '中国银行';
				}else if(num == 1){
					return '农业银行';
				}else if(num == 2){
					return '工商银行';
				}else if(num == 3){
					return '建设银行';
				}else if(num == 4){
					return '邮政储蓄银行';
				}else if(num == 5){
					return '交通银行';
				}else if(num == 6){
					return '招商银行';
				}else if(num == 7){
					return '兴业银行';
				}else if(num == 8){
					return '中信银行';
				}else if(num == 9){
					return '浦发银行';
				}else if(num == 10){
					return '广发银行';
				}else if(num == 11){
					return '民生银行';
				}else if(num == 12){
					return '华夏银行';
				}else if(num == 13){
					return '平安银行';
				}else{
					return '其他银行'
				}
			},
			getBankJX(num){
				if(num == 0){
					return 'zg';
				}else if(num == 1){
					return 'ny';
				}else if(num == 2){
					return 'gs';
				}else if(num == 3){
					return 'js';
				}else if(num == 4){
					return 'yz';
				}else if(num == 5){
					return 'jt';
				}else if(num == 6){
					return 'zs';
				}else if(num == 7){
					return 'xy';
				}else if(num == 8){
					return 'zx';
				}else if(num == 9){
					return 'pf';
				}else if(num == 10){
					return 'gf';
				}else if(num == 11){
					return 'ms';
				}else if(num == 12){
					return 'hx';
				}else if(num == 13){
					return 'pa';
				}else{
					return 'qt'
				}
			},
			getBankNum(num){
				return '**** '+num.substring(num,num.length - 4)
			}
		}
	}
</script>

<style lang='scss'>
	.money-icon{
		width: 50upx;
		height: 100upx;
		line-height: 100upx;
	}
	.money-input-view{
		width: calc(100% - 50upx);
		height: 100upx;
	}
	.money-input-view input{
		width: 100%;
		height: 100%;
	}
	.head-block {
		height: 220upx;
	}

	.border-top {
		border-top: 1px #FFFFFF solid;
	}

	.border-right {
		border-right: 1px #FFFFFF solid;
	}

	.money-block {
		width: 50%;
	}

	.bank-icon {
		width: 80upx;
		height: 80upx;
	}

	.bank-icon image {
		width: 100%;
		height: 100%;
	}

	.gsyh {
		background-image: linear-gradient(45deg, #f76f6c, #ec3838);
		color: #ffffff;
	}
	.zgyh {
		background-image: linear-gradient(45deg, #f27e83, #b81c22);
		color: #ffffff;
	}
	.jsyh {
		background-image: linear-gradient(45deg, #4da0f1, #004f9c);
		color: #ffffff;
	}
	.nyyh {
		background-image: linear-gradient(45deg, #6ec6ae, #2f856d);
		color: #ffffff;
	}
	.yzyh {
		background-image: linear-gradient(45deg, #61c793, #007f3e);
		color: #ffffff;
	}
	
	.jtyh {
		background-image: linear-gradient(45deg, #1D2088, #333af4);
		color: #ffffff;
	}
	.zsyh {
		background-image: linear-gradient(45deg, #A61F23, #7f171a);
		color: #ffffff;
	}
	.xyyh {
		background-image: linear-gradient(45deg, #002E6C, #004db1);
		color: #ffffff;
	}
	.zxyh {
		background-image: linear-gradient(45deg, #D7000F, #fa0014);
		color: #ffffff;
	}
	.pfyh {
		background-image: linear-gradient(45deg, #1D2087, #2b30cc);
		color: #ffffff;
	}
	
	.gfyh {
		background-image: linear-gradient(45deg, #6E1318, #D51523);
		color: #ffffff;
	}
	.msyh {
		background-image: linear-gradient(45deg, #1D2087, #5AA472);
		color: #ffffff;
	}
	.hxyh {
		background-image: linear-gradient(45deg, #E50012, #DBDCDC);
		color: #ffffff;
	}
	.payh {
		background-image: linear-gradient(45deg, #DE5411, #f95b12);
		color: #ffffff;
	}
	
	.bank-name-block {
		width: calc(60% - 80upx);
	}

	.bank-number {
		width: 40%;
	}
	.card-list{
		height: calc(100% - 300upx - 80upx - 88upx );
		overflow-x: hidden;
		overflow-y: auto;
	}
	.card-item{
		border-radius: 15upx;
	}
	page{
		height: 100%;
	}
	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
	
		&.show {
			display: block;
	
			.mask {
				animation: showPopup 0.2s linear both;
			}
	
			.layer {
				animation: showLayer 0.2s linear both;
			}
		}
	
		&.hide {
			.mask {
				animation: hidePopup 0.2s linear both;
			}
	
			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}
	
		&.none {
			display: none;
		}
	
		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}
	
		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 40vh;
			border-radius: 10upx 10upx 0 0;
			background-color: #fff;
	
			.btn {
				height: 66upx;
				line-height: 66upx;
				border-radius: 100upx;
				background: $uni-color-primary;
				font-size: $font-base + 2upx;
				color: #fff;
				margin: 30upx auto 20upx;
			}
		}
	
		@keyframes showPopup {
			0% {
				opacity: 0;
			}
	
			100% {
				opacity: 1;
			}
		}
	
		@keyframes hidePopup {
			0% {
				opacity: 1;
			}
	
			100% {
				opacity: 0;
			}
		}
	
		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}
	
			100% {
				transform: translateY(0%);
			}
		}
	
		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}
	
			100% {
				transform: translateY(120%);
			}
		}
	}
</style>
